<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>


  <head>
    <title>Basic Custom Example</title>
    <script src="{{=URL('static','adminlte/plugins/wizard/jquery-latest.js')}}"></script>
    {{include 'pages/base/layout.html'}}
    <!-- custom styles -->
	<link href="{{=URL('static','adminlte/plugins/wizard/custom.css')}}" rel="stylesheet">
	<link href="{{=URL('static','adminlte/plugins/wizard/prettify.css')}}" rel="stylesheet">
    <script src="{{=URL('static','adminlte/plugins/wizard/jquery.bootstrap.wizard.js')}}"></script>
    <script src="{{=URL('static','adminlte/plugins/wizard/prettify.js')}}"></script>


    <script src="{{=URL('static','adminlte/plugins/datepicker/bootstrap-datepicker.js')}}"></script>
    <link rel="stylesheet" href="{{=URL('static','adminlte/plugins/datepicker/datepicker3.css')}}">
  </head>


	<script>
	$(document).ready(function() {
	  	$('#rootwizard').bootstrapWizard({
	  	    'tabClass': 'bwizard-steps',
            onTabClick: function(tab, navigation, index) {
                //alert('on tab click disabled');
                return false;
            },
            onNext: function(tab, navigation, index) {
                if(index==1) {
                    // Make sure we entered the name
//                    if(!$('#name').val()) {
//                        alert('策略名称必须输入！');
//                        $('#name').focus();
//                        return false;
//                    }
                }
                if(index==2) {

                }

                if(index==4) {
                    $('#teb5stockpool').val($('#teb4stockpool option:selected').text())

                    $('#teb5market').val($('#teb4market option:selected').text())
                    $('#tab5trackerror').val($('#tab4trackerror option:selected').text())
                    $('#tab5hedgingfunc').val($('#tab4hedgingfunc option:selected').text())
//                    $('#teb5market').val($('#teb4market').val())
                }

                // Set the name for the next tab
                //$('#tab3').html('Hello, ' + $('#name').val());

            },
            onTabShow: function(tab, navigation, index) {
                var $total = navigation.find('li').length;
                var $current = index+1;
                var $percent = ($current/$total) * 100;
                $('#rootwizard .progress-bar').css({width:$percent+'%'});
            }




	  	});

	$('#rootwizard .finish').click(function() {
		alert('Finished!, Starting over!');
		$('#rootwizard').find("a[href*='tab1']").trigger('click');
	});

	$( "#beginDatepicker" ).datepicker({format: 'yyyy-mm-dd'});
	$( "#endDatepicker"   ).datepicker({format: 'yyyy-mm-dd'});

	$( "#tab4beginDatepicker" ).datepicker({format: 'yyyy-mm-dd'});
	$( "#tab4endDatepicker"   ).datepicker({format: 'yyyy-mm-dd'});
	});

	</script>




 <body>
    <div class='container'>
			<section id="wizard">
				<div id="rootwizard">


             <div class="navbar">
              <div class="navbar-inner">
                <div class="container">
					<ul>
					  	<li><a href="#tab1" data-toggle="tab"><span class="label">1</span> 策略名称</a></li>
						<li><a href="#tab2" data-toggle="tab"><span class="label">2</span> 风险模型构建</a></li>
						<li><a href="#tab3" data-toggle="tab"><span class="label">3</span> 因子有效性检验</a></li>
						<li><a href="#tab4" data-toggle="tab"><span class="label">4</span> 构建投资组合</a></li>
						<li><a href="#tab5" data-toggle="tab"><span class="label">5</span> 投资组合结构展示</a></li>
					</ul>
                </div>
              </div>
             </div>

            <div id="bar" class="progress" hidden>
                 <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div>
            </div>
            <form class="form-horizontal" role="form" >
					<div class="tab-content">
					    <div class="tab-pane" id="tab1">
                             <p class="form-control-static"></p>
                              <div class="form-group">
                                <label for="firstname" class="col-sm-2 control-label ">策略名称:</label>
                                <div class="col-sm-10">
                                  <input type="text" class="form-control" id="name" placeholder="请输入策略名称" >
                                </div>
                              </div>
                              <p class="form-control-static"></p>
					    </div>
					    <div class="tab-pane" id="tab2">
					        <div class="row">
                               <div class="col-sm-6">
                                 <iframe  id="treeDemo" name="treeDemo" src="{{=URL('demo','treemove')}}" style=" width: 100%; height: 300px;  padding: 0;"  frameborder="0" ></iframe>
                               </div>
                               <div class="col-sm-6"  >
                                    <div class="form-group">
                                        <label  class="col-sm-3 control-label ">股票池:</label>
                                        <div class="col-sm-9">
                                                <select class="form-control">
                                                {{for row in stockpool_dict:}}
                                                     <option value="{{=row.enumvalue}}">{{=row.enumlabel}}</option>
                                                {{pass}};
                                                </select>
                                        </div>

                                    </div>
                                    <div class="form-group">
                                      <div class="col-sm-offset-3 col-sm-9">
                                           <div class="checkbox">
                                                <label><input type="checkbox" value="">ST股票</label>
                                            </div>
                                            <div class="checkbox">
                                                <label><input type="checkbox" value="">停盘</label>
                                            </div>
                                           <div class="checkbox">
                                                <label><input type="checkbox" value="">退市</label>
                                            </div>
                                       </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="col-sm-offset-1 col-sm-10">
                                        <label for="selectdate">数据日期选择：</label>
                                        </div>


                                        <label for="firstname" class="col-sm-offset-1  col-sm-3 control-label ">起始时间:</label>
                                        <div class="col-sm-8">
                                          <input type="text" class="form-control" id="beginDatepicker">
                                        </div>
                                        <label for="firstname" class="col-sm-offset-1 col-sm-3 control-label ">结束时间:</label>
                                        <div class="col-sm-8">
                                          <input type="text" class="form-control" id="endDatepicker">
                                        </div>

                                    </div>
                               </div>

                            </div>
					    </div>
						<div class="tab-pane" id="tab3">

                            <ul id="myTab" class="nav nav-tabs">
                                <li class="active">
                                    <a href="#home" data-toggle="tab">
                                         因子有效性检验
                                    </a>
                                </li>
                                <li>
                                    <a href="#ios" data-toggle="tab">
                                         最小波动纯因子组合收益
                                    </a>
                                </li>
                            </ul>
                            <div id="myTabContent" class="tab-content">
                                <div class="tab-pane fade in active" id="home">
                                    <table class="table table-condensed">
                                        <thead>
                                            <tr>
                                                <th>编号</th>
                                                <th>因子分类</th>
                                                <th>备选因子</th>
                                                <th>稳定性检验</th>
                                                <th>T检验</th>
                                                <th>|T|>2的比例</th>
                                                <th>VIF检验</th>
                                                <th>因子类别</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>1</td>
                                                <td>质量因子</td>
                                                <td>速动比率</td>
                                                <td>0.63</td>
                                                <td>1.22</td>
                                                <td>60.75%</td>
                                                <td>4.52</td>
                                                <td>无效因子</td>
                                            </tr>
                                            <tr>
                                                <td>2</td>
                                                <td>估值因子</td>
                                                <td>总市值</td>
                                                <td>0.98</td>
                                                <td>2.7</td>
                                                <td>78.66%</td>
                                                <td>2.10</td>
                                                <td>阿尔法因子</td>
                                            </tr>
                                            <tr>
                                                <td>3</td>
                                                <td>一致性预期</td>
                                                <td>EPS</td>
                                                <td>0.92</td>
                                                <td>7.5</td>
                                                <td>80.00%</td>
                                                <td>1.89</td>
                                                <td>风险因子</td>
                                            </tr>
                                            <tr>
                                                <td>4</td>
                                                <td>技术因子</td>
                                                <td>RSI14</td>
                                                <td>0.85</td>
                                                <td>2.11</td>
                                                <td>46.50%</td>
                                                <td>5.33</td>
                                                <td>无效因子</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <div class="tab-pane fade" id="ios">
                                    <div class="row" >
                                       <div class="col-sm-3">

                                           <div class="form-group">
                                                <label for="name">显著的因子：</label>
                                                <select multiple class="form-control">
                                                    <option value="销售净利率(%) ">销售净利率(%) </option>
                                                    <option value="流通市值/总市值">流通市值/总市值</option>
                                                    <option value="流通市值自然对数">流通市值自然对数</option>
                                                    <option value="PB ">PB </option>
                                                    <option value="SP:主营业务收入/总市值">SP:主营业务收入/总市值</option>
                                                    <option value="相对 PB ">相对 PB </option>
                                                    <option value="相对 SP">相对 SP</option>
                                                    <option value="最近 3 个月平均成交量">最近 3 个月平均成交量</option>
                                                    <option value="换手率(算术平均) ">换手率(算术平均) </option>
                                                    <option value="成交金额(合计)/股价波动率">成交金额(合计)/股价波动率</option>
                                                </select>
                                           </div>
                                           <div class="form-group">
                                                <label for="name">选择因子暴露：</label>
                                               <div>
                                                  <label class="checkbox-inline">
                                                    <input type="radio" name="optionsRadiosinline" id="optionsRadios3" value="option1" checked> 选项 1
                                                </label>
                                                <label class="checkbox-inline">
                                                    <input type="radio" name="optionsRadiosinline" id="optionsRadios4"  value="option2"> 选项 2
                                                </label>
                                               </div>
                                           </div>
                                           <div class="form-group">
                                                <label for="name">显著的因子：</label>
                                                <select multiple class="form-control">
                                                    <option value="自由现金流（1）">自由现金流（1）</option>
                                                    <option value="市盈率（-1）">市盈率（-1）</option>
                                                </select>
                                           </div>
                                       </div>

                                       <div class="col-sm-offset-1 col-sm-8">
                                            <div class="form-group">
                                               <label for="firstname" class="col-sm-3 control-label ">起始时间:</label>
                                                <div class="col-sm-3">
                                                  <input type="text" class="form-control" id="begin1Datepicker">
                                                </div>
                                                <label for="firstname" class="col-sm-3 control-label ">结束时间:</label>
                                                <div class="col-sm-3">
                                                  <input type="text" class="form-control" id="end1Datepicker">
                                                </div>
                                            </div>
                                       </div>
                                    </div>

                                </div>
                            </div>

					    </div>

						<div class="tab-pane" id="tab4">
                            <div class="row" >
                                <div class=col-sm-12">
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label " for="firstname" >数据日期：</label>
                                        <label class="col-sm-2 control-label " for="firstname" >起始时间:</label>
                                        <div class="col-sm-3">
                                             <input type="text" class="form-control" id="tab4beginDatepicker">
                                        </div>
                                        <label class="col-sm-2 control-label " for="firstname" >结束时间:</label>
                                        <div class="col-sm-3">
                                          <input type="text" class="form-control" id="tab4endDatepicker">
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="row" >
                                <div class=col-sm-12">
                                    <div class="form-group">
                                        <label  class="col-sm-2 control-label ">股票池:</label>
                                        <div class="col-sm-3">
                                                <select id="teb4stockpool" class="form-control">
                                                {{for row in stockpool_dict:}}
                                                     <option  value="{{=row.enumvalue}}">{{=row.enumlabel}}</option>
                                                {{pass}};
                                                </select>
                                        </div>
                                        <div class="col-sm-7">
                                           <div class="checkbox">
                                               <label><input type="checkbox" value="">ST股票</label>
                                               <label><input type="checkbox" value="">停盘</label>
                                               <label><input type="checkbox" value="">退市</label>
                                           </div>
                                       </div>
                                    </div>
                                </div>
                            </div>

                            <div class="row" >
                                <div class=col-sm-12">
                                    <div class="form-group">
                                        <label  class="col-sm-2 control-label ">市场组合:</label>
                                        <div class="col-sm-3">
                                                <select id="teb4market" class="form-control">
                                                {{for row in stockpool_dict:}}
                                                     <option value="{{=row.enumvalue}}">{{=row.enumlabel}}</option>
                                                {{pass}};
                                                </select>
                                        </div>
                                        <div class="col-sm-7">
                                           <div class="checkbox">
                                               <label><input type="checkbox" value="">ST股票</label>
                                               <label><input type="checkbox" value="">停盘</label>
                                               <label><input type="checkbox" value="">退市</label>
                                           </div>
                                       </div>
                                    </div>
                                </div>
                            </div>

                            <div class="row" >
                                <div class=col-sm-12">
                                    <div class="form-group">
                                        <label  class="col-sm-2 control-label ">交易成本:</label>
                                        <div class="col-sm-3">
                                                <select class="form-control">
                                                {{for row in transcosts_dict:}}
                                                     <option value="{{=row.enumvalue}}">{{=row.enumlabel}}</option>
                                                {{pass}};
                                                </select>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="row" >
                                <div class=col-sm-12">
                                    <div class="form-group">
                                        <label  class="col-sm-2 control-label ">对冲方式:</label>
                                        <div class="col-sm-3">
                                            <select id="tab4hedgingfunc" class="form-control">
                                                {{for row in hedgingfunc_dict:}}
                                                     <option value="{{=row.enumvalue}}">{{=row.enumlabel}}</option>
                                                {{pass}};
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="row" >
                                <div class=col-sm-12">
                                    <div class="form-group">
                                        <label  class="col-sm-2 control-label ">优化目标函数:</label>
                                        <div class="col-sm-3">
                                                <select class="form-control">
                                                {{for row in majorizfunc_dict:}}
                                                     <option value="{{=row.enumvalue}}">{{=row.enumlabel}}</option>
                                                {{pass}};
                                                </select>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="row" >
                                <div class=col-sm-12">
                                    <div class="form-group">
                                        <label  class="col-sm-2 control-label ">控制跟踪误差:</label>
                                        <div class="col-sm-3">
                                            <select id="tab4trackerror" class="form-control">
                                                {{for row in trackerror_dict:}}
                                                     <option value="{{=row.enumvalue}}">{{=row.enumlabel}}</option>
                                                {{pass}};
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>

					    </div>
						<div class="tab-pane" id="tab5">

                             <div class="row" >
                                <div class=col-sm-12">
                                    <div class="form-group">
                                        <label  class="col-sm-2 control-label ">股票池:</label>
                                        <div class="col-sm-2">
                                            <input type="text" class="form-control" id="teb5stockpool" readonly>
                                        </div>

                                        <label  class="col-sm-2 control-label ">市场组合:</label>
                                        <div class="col-sm-2">
                                            <input type="text" class="form-control" id="teb5market" readonly>
                                        </div>

                                        <label  class="col-sm-2 control-label ">控制误差:</label>
                                        <div class="col-sm-2">
                                            <input type="text" class="form-control" id="tab5trackerror" readonly>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="row" >
                                <div class=col-sm-12">
                                    <div class="form-group">
                                        <label  class="col-sm-2 control-label ">对冲方式:</label>
                                        <div class="col-sm-2">
                                            <input type="text" class="form-control" id="tab5hedgingfunc" readonly>
                                        </div>

                                        <label  class="col-sm-2 control-label ">卖空:</label>
                                        <div class="col-sm-2">
                                            <input type="text" class="form-control" id="sellEmp" value="200手" readonly>
                                        </div>
                                    </div>
                                </div>
                            </div>


						<ul class="pager wizard">
							<li class="previous first" style="display:none;"><a href="#">First</a></li>
							<li class="previous"><a href="#">上一步</a></li>
							<li class="next last" style="display:none;"><a href="#">Last</a></li>
						  	<li class="next"><a href="#">下一步</a></li>
                            <li class="finish"><a href="javascript:;">完成</a></li>
						</ul>
					</div>
                    </form>
				</div>


			</section>
	</div>

  </body>
</html>